<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!DOCTYPE html>
	<html lang="en" class="no-ie" style="overflow:hidden;">
		<head>
			<meta charset="UTF-8">
			<title>间隔柱状</title>
			<script>
				"object" != typeof ue || "object" != typeof ue.interface ? ("object" != typeof ue && (ue = {}), ue.interface = {},
					ue.interface.broadcast = function(e, t) {
						if ("string" == typeof e) {
							var o = [e, ""];
							void 0 !== t && (o[1] = t);
							var n = encodeURIComponent(JSON.stringify(o));
							"object" == typeof history && "function" == typeof history.pushState ? (history.pushState({}, "",
								"#" + n), history.pushState({}, "", "#" + encodeURIComponent("[]"))) : (document.location
								.hash = n, document.location.hash = encodeURIComponent("[]"))
						}
					}) : function(e) {
					ue.interface = {}, ue.interface.broadcast = function(t, o) {
						"string" == typeof t && (void 0 !== o ? e.broadcast(t, JSON.stringify(o)) : e.broadcast(t, ""))
					}
				}(ue.interface), (ue4 = ue.interface.broadcast);
			</script>
			<script src="./dist/echarts.min.js"></script>
            <script src="./static/js/jquery.min.js"></script>
			<script>
				$(function() {
					ue4("getSize", {
						mes: "get windows size"
					});
					ue4("getColor", {
						mes: "get all color"
					});
					ue4("getData", {
						mes: "get all data"
					});
					ue4("beginSize", {
						mes: BeginSize[0],
						mes2: BeginSize[1]
					});
					ue4("beginSizeY", {
						mes: BeginSize
					});
				});
				/*$(function () {
				    
				});*/
			</script>
			<style>
				* {
					margin: 0;
					padding: 0;
					
				}
			</style>
		</head>
		<body>
			<div id="main"></div>
			<!--
		dataTemp1: y轴数值;dataTemp2: x轴标题
		
		-->
			<script>
				let BeginSize = [495, 210];
				let myChart = null;
				let datacat = ["10-03","10-04","10-05","10-06","10-07","10-08","10-09"];
				let databar = [3000,2000,2500,2250,1500,2400,2000]

				function fresh() {

					let option = {
                        backgroundColor:"#000a3f",
      tooltip: {
          trigger: 'axis',
          axisPointer: {
              type: 'shadow'
          },
          backgroundColor: 'rgba(9, 24, 48, 0.5)',
          borderColor: 'rgba(75, 253, 238, 0.4)',
          textStyle: {
              color: '#FFFFFF',
          },
          borderWidth: 1,
      },
      grid: {
          top: '25%',
          right: '7%',
          left: "15%",
          bottom: '10%'
      },
      xAxis: [{
          name: "",
          type: 'category',
          data: datacat,
          axisLine: {
            show:false,
              lineStyle: {
                  color: '#FFFFFF'
              }
          },
          axisLabel: {
            interval:'0',
              margin: 8,
              color: '#FFFFFF',
              textStyle: {
                  fontSize: 10
              },
          },
          axisTick: {
              show: false
          },
          splitLine: {
              show:true,
              lineStyle: {
                  color: 'rgba(255,255,255,0.15)'
              }
          },
      }],
      yAxis: [{
          name: "(次)",
          splitNumber:3,
          nameGap: '-155',
          axisLabel: {
            interval:'1',
              margin: 10,
              formatter: '{value}',
              color: '#e2e9ff',
          },
          axisTick: {
              show: false
          },
          axisLine: {
              show: false,
              lineStyle: {
                  color: '#FFFFFF'
              }
          },
          splitLine: {
              show:true,
              lineStyle: {
                  color: 'rgba(255,255,255,0.25)'
              }
          },
          
      }],
      series: [{
          type: 'bar',
          data: databar,
          barWidth: '80%',
          itemStyle: {
              normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: 'rgba(161, 217, 255, 0.8)' // 0% 处的颜色
                  }, {
                      offset: 1,
                      color: 'rgba(0,77,167,0.1)' // 100% 处的颜色
                  }], false),
                  shadowColor: 'rgba(0,160,221,1)',
                  shadowBlur: 4,
              }
          },
          label: {
              normal: {
                  show: true,
                  lineHeight: 10,
                  formatter: '{c}',
                  position: 'top',
                  textStyle: {
                      color: '#FFFFFF',
                      fontSize: 12
                  }

              }
          }
      }]
					};
					myChart = echarts.init(document.getElementById('main'));
					myChart.setOption(option);
				}

				fresh();


				//浏览器测试用
				change(BeginSize[0], BeginSize[1]);

				function change(x, y) {
					let div = document.getElementById("main");
					//alert("I am an alert box!!");
					div.style.width = x + "px";
					div.style.height = y + "px";
					var myOption = myChart.getOption();
					myChart.resize();
                    let types = []
                    myOption.series.forEach((item) => {
						types.push(item.type)
					})
					return types
				}
				/************下面数据***********/
				ue.interface.TransData1 = function(data) {
					dataTemp1 = data;
					fresh();
				};
			</script>
		</body>
	</html>

	<body>
	</body>
</html>
